<template>
  <div class="container" :span="18">
    <div class="main">
      <div class="title">{{ blogInfo.title }}</div>
      <div class="info">
        &nbsp;&nbsp;<el-tag effect="dark" round type="warning">作者</el-tag
        >&nbsp;
        <div class="author" @click="toUserDetail">{{ blogInfo.nickName }}</div>
        &nbsp;&nbsp;<el-tag effect="dark" round type="success">专题</el-tag
        >&nbsp;
        <div class="category" @click="toSpecialDetail">
          {{ blogInfo.categoryName }}
        </div>
        <div class="time">&nbsp;&nbsp;于{{ blogInfo.createTime }}发布</div>
      </div>
      <div class="content">
        <el-scrollbar>
          <div v-html="blogInfo.content"></div>
        </el-scrollbar>
      </div>
    </div>
  </div>

  <SpecialItem
    class="special"
    :cover="specialInfo.cover"
    :categoryName="specialInfo.categoryName"
    :categoryDesc="specialInfo.categoryDesc"
    :blogCount="specialInfo.blogCount"
    :categoryId="specialInfo.categoryId"
  />

  <div class="tree">
    <el-tree
      ref="treeRef"
      :data="specialList"
      :props="specialProps"
      highlight-current
      default-expand-all
      :expand-on-click-node="false"
      node-key="blogId"
      @node-click="getBlogDetail"
    />
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css";
import bus from "../utils/EventBus";
const route = useRoute();
const { proxy } = getCurrentInstance();
const router = useRouter();
onMounted(() => {
  getSpecialDetail();
});

const categoryId = ref(route.params.categoryId);

// 专题信息
const specialInfo = ref({});
const specialList = ref([]);
const getSpecialDetail = async () => {
  let result = await proxy.Request({
    url: "/view/getSpecialDetail",
    params: {
      categoryId: categoryId.value,
    },
  });
  if (!result) {
    return;
  }
  specialInfo.value = result.data.blogCategory;
  specialList.value = result.data.blogList;
  const firstBlogId = result.data.blogList[0].blogId;
  nextTick(() => {
    proxy.$refs.treeRef.setCurrentKey(firstBlogId);
  });
  getBlogDetail({ blogId: firstBlogId });
};

// 树形控件配置
const specialProps = ref({
  children: "children",
  label: "title",
});

// 选择节点获取博客信息
const blogInfo = ref({});
const getBlogDetail = async (data) => {
  let result = await proxy.Request({
    url: "/view/getBlogDetail",
    params: {
      blogId: data.blogId,
    },
  });
  if (!result) {
    return;
  }
  blogInfo.value = result.data;
  nextTick(() => {
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
};

const toSpecialDetail = () => {
  router.push("../special/" + blogInfo.value.categoryId);
  bus.emit("toSpecial");
};

const toUserDetail = () => {
  router.push("../user/" + blogInfo.value.userId);
  bus.emit("toUser");
};
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  padding: 10px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .main {
    margin-bottom: 8px;
    height: calc(100vh - 200px);
    box-sizing: border-box;

    .title {
      width: 100%;
      height: 44px;
      line-height: 44px;
      font-size: 28px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: -o-ellipsis-lastline;
    }

    .info {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: rgba(221, 221, 221, 0.568);
      border-radius: 10px;
      cursor: default;

      .author,
      .category {
        color: #79bbff;
        cursor: pointer;
      }

      .time {
        opacity: 0.5;
      }
    }

    .content {
      margin-top: 10px;
      height: calc(100vh - 265px);
    }
  }
}
.special {
  position: absolute;
  left: 1%;
  background-color: #fff;
  border-radius: 10px;
}

.tree {
  position: absolute;
  margin-top: 140px;
  padding: 10px;
  left: 2%;
  width: 230px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
</style>